// 主题色 1. 导入scss 变量
import varaibles from "@/style/variables.module.scss"
export const useSettingStore = defineStore(
  "setting",
  () => {
    // 主题色 2. settings 设置对象 .
    const settings = reactive({
      // 主题色 2-1. 当前用户选择的主题变量
      theme: varaibles.theme,
      // 主题色 2-2. 持久化的主题变量
      originalTheme: "",
      // 是否展示 tagsView 1. 增加 展示 TagsView 变量，控制是否展示 tagsView
      tagsView: false,
      // 是否展示 sidebarLogo 1. 增加 展示 sidebarLogo 变量，控制是否展示 侧边栏图标
      sidebarLogo: false
    })
    // 主题色 3. typeof 获取对象类型
    type ISetting = typeof settings

    // 主题色 4. settings 设置对象 ,修改方法
    //  keyof 获取 类型的 key
    const changeSetting = <T extends keyof ISetting>({
      key,
      value
    }: {
      key: T
      value: ISetting[T]
    }) => {
      settings[key] = value
    }
    // 返回值
    return { changeSetting, settings }
  },
  {
    // 主题色 5. 避免刷新后，自定义主题色丢失，要持久化存储
    // 是否展示 tagsView 2. settings.tagsView 持久化
    // 是否展示 sidebarLogo 2. settings.sidebarLogo 持久化
    persist: {
      // 会话级存储
      storage: sessionStorage,
      pick: ["settings.theme", "settings.tagsView", "settings.sidebarLogo"]
    }
  }
)
